<template>
  <div class="box">
    <div class="comment">
      <p>评论</p>
      <transition name="el-zoom-in-top">
        <span class="seedreply" v-show="seedreply"
          >回复@ {{ this.nickname }}<i @click="removereply">X</i></span
        >
      </transition>

      <el-form>
        <el-input
          ref="inputs"
          v-model="input"
          placeholder="说点什么吧..."
          type="textarea"
          rows="2"
        ></el-input>
        <div class="up">
          <el-upload
            ref="upload"
            action="http://157.122.54.189:9095/upload"
            name="files"
            list-type="picture-card"
            :on-success="uploadImg"
            :on-remove="removeImg"
            :with-credentials="false"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-button type="primary" @click="sumbit">提交</el-button>
        </div>
      </el-form>
    </div>
    <div class="commentltem">
      <div class="neirong" v-for="value in comments" :key="value.id">
        <div class="user">
          <img :src="value.account.defaultAvatar" alt="" />{{
            value.account.nickname
          }}<i>{{ timestampToTime(value.created_at) }}</i>
        </div>
        <MyCommentltem v-if="value.parent" :parent="value.parent" />
        <div class="content">
          <p>{{ value.content }}</p>
          <div class="imgs" v-for="v in value.pics" :key="v.id">
            <img :src="v.url" alt="" />
          </div>
          <div class="kong">
            <span @click="reply(value.id, value.account.nickname)">回复</span>
          </div>
        </div>
      </div>
      <div class="nodata" v-if="this.comments.length == 0" :key="2">
        暂无评论，赶紧抢占沙发
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post", "pageSize", "pageIndex"],
  data() {
    return {
      comments: [],
      seedreply: false,
      input: "",
      nickname: "",
      form: {
        pics: [],
        post: this.post,
        content: this.input,
        follow: ""
      },
      fileList: []
    };
  },
  methods: {
    uploadImg(response, file, fileList) {
      // this.postform.cover.push({ id: esponse.data.id });
      this.form.pics.push(response[0]);
      console.log(file);
    },
    removeImg(file, fileList) {
      let id = file.response.id;
      for (let i = 0; i < this.form.pics.length; i++) {
        if (this.form.pics[i].id === id) {
          this.form.pics.splice(i, 1);
          break;
        }
      }
    },
    sumbit() {
      if (this.input == "") {
        this.$message({
          message: "内容不能为空",
          type: "warning"
        });
        return;
      }
      console.log(this.post);
      this.$axios({
        method: "post",
        url: `/comments`,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userinfo.token
        },
        data: {
          content: this.input,
          post: this.post,
          pics: this.form.pics,
          follow: this.form.follow
        }
      }).then(res => {
        console.log(res);
        this.$message({
          message: res.data.message,
          type: "success"
        });
        this.getPageData(this.pageIndex, this.pageSize);
        this.form.content = "";
        this.form.pics = [];
        this.follow = "";
        this.fileList = [];
        this.$refs.upload.clearFiles();
        this.$refs.inputs.clear();
      });
    },
    getPageData(pageIndex, pageSize) {
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = this.pageSize;
      let data = {
        post: this.post,
        _start: start,
        _limit: end
      };
      this.$axios({
        url: `/posts/comments`,
        params: data
      }).then(res => {
        this.comments = res.data.data;
        console.log(this.comments);
        this.$emit("getTotal", res.data.total);
        this.comments = this.comments.map(value => {
          value.pics.map(v => {
            v.url = "http://157.122.54.189:9095" + v.url;
            return v;
          });
          value.account.defaultAvatar =
            "http://157.122.54.189:9095" + value.account.defaultAvatar;
          return value;
        });
        console.log(this.comments);
      });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // let Y = date.getFullYear() + '-';
      // let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      // let D = date.getDate() + ' ';
      // let h = date.getHours() + ':';
      // let m = date.getMinutes() + ':';
      // let s = date.getSeconds();
      // return Y+this.padLeftZero(M)+this.padLeftZero(D)+this.padLeftZero(h)+this.padLeftZero(m)+this.padLeftZero(s);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    // 请求评论数据
    commentsList() {},
    // 点击回复按钮事件
    reply(id, name) {
      this.seedreply = true;
      console.log(id, name);
      this.nickname = name;
      this.form.follow = id;
    },
    //回复删除按钮
    removereply() {
      this.seedreply = false;
      this.nickname = "";
      this.form.follow = "";
    }
  },
  mounted() {},

  watch: {
    post() {
      this.getPageData(this.pageIndex, this.pageSize);
    },
    // 监听父组件传来的数据
    pageSize() {
      this.getPageData(this.pageIndex, this.pageSize);
    },
    pageIndex() {
      this.getPageData(this.pageIndex, this.pageSize);
    }
  }
};
</script>

<style lang="less" scoped>
.comment {
  .seedreply {
    display: inline-block;
    font-size: 10px;
    padding: 7px;
    height: 20px;
    line-height: 20px;
    background-color: #f4f4f5;
    color: #ddd;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid #e0e0e3;
    border-radius: 5%;
    i {
      margin-left: 10px;
      color: #909399;
      cursor: pointer;
    }
  }
  p {
    font-size: 20px;
    padding: 10px 0;
  }

  .up {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    /deep/ .el-upload-list__item {
      width: 100px;
      height: 100px;
    }
    /deep/.el-button {
      flex-grow: 0;
      width: 56px;
      height: 28px;
      padding: 0;
    }
    /deep/.el-upload {
      max-width: 100px;
      max-height: 100px;
      line-height: 100px;
    }
  }
}
.commentltem {
  border: 1px solid #ccc;
  width: 700px;

  box-sizing: border-box;
  margin-top: 20px;
  .neirong {
    padding: 20px 20px 5px;
    border-bottom: dotted 1px #ddd;
    .user {
      font-size: 12px;
      color: #666666;
      margin-bottom: 10px;
      img {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        vertical-align: top;
        padding: 0 5px;
      }
      i {
        font-size: 10px;
        color: #999999;
        margin-left: 5px;
      }
    }
    .content {
      padding-left: 30px;
      .imgs {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        padding: 5px;
        margin-right: 10px;
        border: 1px dotted #ddd;
        border-radius: 10%;
        display: inline-block;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .content:hover .kong > span {
      opacity: 1;
    }
    .kong {
      height: 20px;
      text-align: right;
      span {
        opacity: 0;
        font-size: 12px;
        color: #409eff;
        cursor: pointer;
      }
    }
  }
  .nodata {
    padding: 30px 0;
    color: #999999;
    text-align: center;
    font-size: 14px;
  }
}
</style>
